<template>
  <div class="weather">
    <div class="wtdate">{{wtInfo.currentDate}}
      <span class="wweek">{{wtInfo.currentWeek}}</span>
    </div>
    <div class="wt">
      <div class="wtimg"><img :src="wtInfo.icoImg"></div>
      <div class="wtname">{{wtInfo.weather}}</div>
    </div>
    <div class="ot">
      <div class="tp">
        <label>温度</label>
        <span>{{wtInfo.degree}}°C</span>
      </div>
      <div class="api">
        <label>空气质量</label>
        <span>{{rank.aqi_name}}</span>
      </div>
    </div>
  </div>

</template>

<script>
import TimeUpdate from '../corejs/time/time-update'
import dateParse from './base/date-parse'
import getWeatherInfo from './base/index'
import getWtImg from './base/get-wt-img'

let timeUpdate = new TimeUpdate()

export default {
  name: 'weather1',
  props: ['cityName'],
  data () {
    return {
      // cityName: '深圳',
      wtInfo: {},
      rank: {}
    }
  },
  created () {
    timeUpdate.start(this.update, 1000 * 60 * 60 * 2)
  },
  destroyed () {
    timeUpdate.stop()
  },
  watch: {
    cityName () {
      this.update()
    }
  },
  methods: {
    update () {
      let { cityName } = this
      if (cityName) {
        let { year, month, day, weekZh } = dateParse(new Date())
        getWeatherInfo(cityName, d => {
          let { air, observe } = d
          observe.icoImg = getWtImg(observe).icoImg
          observe.currentDate = [year, month, day].join('/')
          observe.currentWeek = '星期' + weekZh
          this.wtInfo = observe
          this.rank = air
        })
      }
    }
  }
}
</script>

<style scoped>
.weather {
  color: #fff;
  font-size: 20px;
  height: 108px;
  text-shadow: 0px 1px 3px #7b7b7b;
  .wweek {
    padding-left: 10px;
  }
  .wt {
    float: left;
    margin-top: -4px;
  }
  .wtimg {
    width: 60px;
    height: 60px;
    img {
      width: 100%;
    }
  }
  .wtname {
    color: #fbf164;
    text-align: center;
    margin-top: -6px;
  }
  .ot {
    overflow: hidden;
    padding-left: 10px;
    span {
      color: #fbf164;
    }
    label {
      padding-right: 10px;
    }
  }
  .tp {
    padding: 16px 0 6px;
  }
  .api {
  }
}
</style>
